<template>
  <a-config-provider :locale="locale">
    <div id="app">
		<router-view></router-view>
		<a-spin class="full-loading" :spinning="hasGlobalLoading&&loading" tip="Loading..."></a-spin>
	  	<div class="env-tag" v-if="envName">
			{{envName+' '+baseUrl}}
		</div>
    </div>
  </a-config-provider>
</template>

<script>
import store from './store/store.js';
import config from '@/config';

export default {
	name: 'app',
	components: {},
	computed: {
		loading: function() {
			return store.state.loadding;
		},
		/** 是否显示全局加载窗 */
		hasGlobalLoading:function(){
			return store.state.hasGlobalLoading;
		},
		envName(){
			const EnvEnum = config.EnvEnum;
			if (config.env==EnvEnum.TEST) {
				return '测试环境';
			}else if(config.env==EnvEnum.DEV_TEST){
				return '开发测试环境';
			}else if(config.env==EnvEnum.DEV){
				return '开发环境';
			}
			else if(config.env==EnvEnum.PRE){
				return null;
				return '预发布环境';
			}
			else{
				// 正式环境不显示内容
				return null;
			}
		},
		locale(){
			// console.log(this.$store.state.lang)
      		return this.$i18n.getLocaleMessage(this.$store.state.lang).antLocale
		},
	},
	data() {
      return {
		baseUrl: config.apiRoot
      }
	}
};
</script>

<style lang="less">
// body {
// 	margin: 0px;
// 	padding: 0px;
// 	font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, SimSun, sans-serif;
// 	font-size: 14px;
// 	-webkit-font-smoothing: antialiased;
// }
// .ant-spin-container {
// 	height: 100% !important;
// }
// #app {
// 	position: absolute;
// 	top: 0px;
// 	bottom: 0px;
// 	overflow: hidden;
// 	width: 100%;
// }
.fade-enter-active,
.fade-leave-active {
	transition: all 0.2s ease;
}
.fade-enter,
.fade-leave-active {
	opacity: 0;
}
.shuaBtn {
	float: right;
}

.ant-spin-spinning.full-loading{
	z-index: 99;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	.ant-spin-blur{
		opacity:0.9;
	}
	.ant-spin-blur::after{
		opacity:0;
	}
}

.env-tag{
	position: absolute;
	top: 5px;
	left: 50%;
	transform: translate(-50%,0);
	color: red;
	font-size: 20px;
	font-weight: bold;
	background-color: #ffffff;
	border-radius: 2px;
	padding: 5px;
	z-index: 99;
}
</style>
